<template>
  <div>
    <el-form :model="params" ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
      <el-row >
        <el-col :span='7'>
          <el-form-item label="日期">
              <pt-date-picker v-model="params.date" :shortcuts="[{ text: '今天', start: 0, end: 0}, { text: '昨天', start: -1, end: 0},
                { text: '近七天', start: -7, end: 0}, {text: '近一个月', start: -30, end: 0}]" />
          </el-form-item>
        </el-col>
        <el-col :span="17" style="text-align:right;">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSizeChange(10)">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap" >
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column prop="name" label="区域名称" min-width="120" align="left" />
        <el-table-column prop="totalNum" label="总订单数" min-width="80" align="center" />
        <el-table-column label="订单总额" min-width="80" align="center">
          <template slot-scope='scope'>{{scope.row.totalAmount/100}}</template>
        </el-table-column>
        <el-table-column prop="totalTipNum" label="打赏订单" min-width="80" align="center" />
        <el-table-column prop="totalTip" label="打赏金额" min-width="80" align="center" />
        <el-table-column label="区域收入" min-width="110" align="center">
          <template slot-scope='scope'>{{scope.row.totalAgentIncome/100}}</template>
        </el-table-column>
        <el-table-column label="平台抽成" min-width="120" align="center">
          <template slot-scope='scope'>{{scope.row.totalPlateformIncome/100}}</template>
        </el-table-column>
      </el-table>
      <!-- 复制 el-table v-loading  v-loading无法快速响应 所有自定义 -->
      <div class="base-directives-loading" v-show="isloadingTable">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg>
        </div>
      </div>
      <div class="base-pagination clearfix">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="newPage" :pageSize="pageSize":total="tableData.total" 
          :page-sizes="[15,  30, 45]" background layout="total,sizes, prev, pager, next, jumper" />
      </div>
    </div>
  </div>
</template>

<script>
  import {getDay} from '@/utils/ptkc.js'
  export default {
    data() {
      return {
        params: {
          page: 0,
          size: 15,
          date: [getDay(-30) + ' ' + '00:00:00', getDay(0) + ' ' + '23:59:59']
        },
        isloadingTable: false, //表单等待
        diyLoading: true, //自定义等待
        tableData: {}, //表单数据
        newPage: 1, //默认分页
        pageSize: 15 //分页数量
      }
    },
    methods: {
      handleSizeChange(size) { //切换条数
        this.params.size = size
        this.pageSize = size
        this.newPage = 1
        this.params.page = 0
        this.getTableList()
      },
      handleCurrentChange(page) { // 切换分页
        this.params.page = page - 1
        this.getTableList()
      },
      getTableList() { // 获取订单数据
        this.isloadingTable = true
        const params = { ...this.params }
        params.date = params.date? params.date.join(',') : ''
        this.$http.get('/server/paotui/agentStatistics/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      }
    },
    mounted() {
      this.getTableList()
    }
  }
</script>

<style scoped>

</style>
